<template >

  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div>
        <img class= "img-logo" src="../assets/css/logo.png" alt="">
        <span>商城管理平台</span>
      </div>
      <el-button type='info' @click="logout">退出</el-button>
    </el-header>

    <el-container>
      <!-- 侧边栏    加：就是动态绑定   注：字符串要加引号    -->
      <el-aside :width="isCollapse? '64px':'200px'">
        <!-- 折叠按钮 -->
        <div class="toggle-button" @click="toggleConllapse">一+一</div>
        <!-- 侧边菜单区域    unique-opened ：打开一个导航栏       collapse：折叠
        collapse-transition：折叠动画       router: 导航路由功能    default-active:高亮效果，刷新后地址不变 -->
      <el-menu background-color="#FFFFFF" text-color="#409EFF" active-text-color="#67C23A"
      unique-opened :collapse="isCollapse" :collapse-transition="false" router
      :default-active="activePath">
        <!-- 一级菜单      index 只接受字符串  -->
        <el-submenu :index='item.id + "" ' v-for="item in menulist" :key="item.id">
          <!-- 一级菜单模板 -->
          <template slot="title">
            <!-- 图标 -->
            <i :class="iconsObj[item.id]"></i>
            <!-- 文本 -->
            <span>{{item.authName}}</span>
          </template>

          <!-- 二级菜单   根据id 遍历导航一级列表     index不加 / 也能实现页面地址跳转（/的用处？）
          subItem.path:对应路径的名称，routes根据这里的值跳转  -->
          <!-- <el-menu-item :index='subItem.id + "" ' v-for="subItem in item.children" :key="subItem.id"> -->
          <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id"
           @click="saveNavState('/' + subItem.path)">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span>{{subItem.authName}}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
      </el-aside>

      <!-- 右侧主体 -->
      <el-main>
        <!-- 路由占位符    这里是Welcome.vue-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
export default {
  data() {
    return {
      // 下面获取的做出数据 挂载到data里
      menulist: [],
      // 图标  id的不同，引用不同的照片
      iconsObj: {
        125: 'iconfont icon-team',
        103: 'iconfont icon-home',
        101: 'iconfont icon-apple',
        102: 'iconfont icon-mail',
        145: 'iconfont icon-rest'
      },
      // 菜单是否折叠
      isCollapse: false,
      // 被激活的链接地址  默认为空
      activePath: ''
    }
  },
  // 加载器获取数据
  created () {
    // 获取菜单列表数据
    this.getMenuList()
    // 页面打开就给  链接赋值
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    logout () {
      // 清除token
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取列表数据
    async getMenuList() {
      const { data: res } = await this.$http.get('menus') // menus为请求路径
      // 异常检测
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 数据赋值
      this.menulist = res.data

      // console.log(res)
    },
    // 菜单折叠
    toggleConllapse() {
      //  等于相反的结果
      this.isCollapse = !this.isCollapse
    },

    // 保存链接的激活状态（页面刷新地址不变的效果）
    saveNavState(activePath) {
      // token的key赋值
      window.sessionStorage.setItem('activePath', activePath)
      // token的value赋值
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>

.home-container {
  width: 100%;
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.el-header {
    display: flex;
    // 平铺效果 左右居中
    justify-content: space-between;
    padding-left: 0;
    //按钮上下居中
    align-items: center;
    // 文本
    font-size: 20px;
    > div {
      color: #409EFF;
      display: flex;
      align-items: center;
      span {
        margin-left: 15px;
      }
    }
    // background-color: #409EFF;
    border-bottom: 1px solid #dcdfe6;
}

.el-aside {
  // 鼠标移动导航栏会出现不对称情况
  .el-menu {
    border-right: none
  }
}

.el-main {
  background-color: #ffffff;
}

.img-logo {
  width: 10%;
  height: 100%;
  border-radius: 50%;
  margin-left: 5%;
}

.iconfont {
  margin-right: 10px;
}

.toggle-button {
  background-color: #F5F8FF;
  font-size: 10px;
  line-height: 24px;
  color: #409EFF;
  text-align: center;
  letter-spacing:  0.2m;
}
</style>
